<template>
  <div>
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>进存销管理系统</span>
              </template>

              <el-submenu index="1-1">
              <template slot="title">资料管理</template>
              <el-menu-item index="1-1-1" @click="showComs(1)">供货商管理</el-menu-item>
              <el-menu-item index="1-1-2" @click="showComs(2)">客户管理</el-menu-item>
              </el-submenu>

              <el-submenu index="1-2">
                <template slot="title">采购管理</template>
                <el-menu-item index="1-2-1">采购入库</el-menu-item>
                <el-menu-item index="1-2-2">采购信息查询</el-menu-item>
              </el-submenu>

              <el-submenu index="1-3">
                <template slot="title">销售管理</template>
                <el-menu-item index="1-3-1">销售出售</el-menu-item>
                <el-menu-item index="1-3-2">销售信查询</el-menu-item>
              </el-submenu>

              <el-submenu index="1-4">
                <template slot="title">库存管理</template>
                <el-menu-item index="1-4-1">库存管理</el-menu-item>
              </el-submenu>

              <el-submenu index="1-5">
                <template slot="title">统计信息</template>
                <el-menu-item index="1-5-1">销售统计</el-menu-item>
                <el-menu-item index="1-5-2">客户统计</el-menu-item>
              </el-submenu>


              <el-submenu index="1-6">
                <template slot="title">权限管理</template>
                <el-menu-item index="1-6-1">用户管理</el-menu-item>
                <el-menu-item index="1-6-2">角色管理</el-menu-item>
              </el-submenu>


              <el-submenu index="1-7">
                <template slot="title">个人信息管理</template>
                <el-menu-item index="1-7-1" @click="showComs(12)">修改密码</el-menu-item>
              </el-submenu>

              <el-submenu index="1-8">
                <template slot="title">日志信息</template>
                <el-menu-item index="1-8-1" @click="showComs(13)">日志一览</el-menu-item>
              </el-submenu>

            </el-submenu>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="18"><div class="grid-content bg-purple-light">
        <Client v-show="oshow"></Client>
        <Supplier v-show="tshow"></Supplier>
        <UpdatePwd v-show="upPwdshow"></UpdatePwd>
        <Daily v-show="dailyShow"></Daily>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
import Supplier from "../components/Supplier";
import Client from "../components/Client";
import UpdatePwd from "@/components/UpdatePwd";
import Daily from "@/components/Daily";
export default {
  name: "Index",
  components: {Daily, UpdatePwd, Client, Supplier},
  data(){
    return{
      tshow:true,
      oshow:false,
      upPwdshow:false,
      dailyShow:false
    }
  },
  methods:{
    handleOpen(){
      console.log('open')
    },
    handleClose(){
      console.log('关闭')
    },
    showComs(tag){
      if(tag==1){
        this.tshow=true
        this.oshow=false
        this.upPwdshow=false
        this.dailyShow=false
      }
      if(tag==2){
        this.oshow=true
        this.tshow=false
        this.upPwdshow=false
        this.dailyShow=false
      }
      if(tag==12){
        this.upPwdshow=true
        this.oshow=false
        this.tshow=false
        this.dailyShow=false
      }
      if(tag==13){
        this.dailyShow=true
        this.upPwdshow=false
        this.oshow=false
        this.tshow=false
      }
    }
  }
}
</script>
<style scoped>
</style>
